<template>
	<div class="page elasticity">
		<div class="page-parmary" style="display: flex;">
			<img class="page-parmary-img" src="@/assets/images/page-Img.png" />
			<div class="page-parmary-item page-title-name" v-if="showPage == 'station'">
				<img class="page-dom-title-img" src="@/assets/images/station-on.png">
				<div style="margin-left: 1rem;">
					<div class="page-title-name-sw">台站总览</div>
					<div style="font-size: 0.45rem;">Overview of Stations</div>
				</div>
			</div>
			<div class="page-parmary-item page-title-name" v-if="showPage == 'room'">
				<img class="page-dom-title-img" src="@/assets/images/room-on.png">
				<div style="margin-left: 1rem;">
					<div class="page-title-name-sw">机房总览</div>
					<div style="font-size: 0.45rem;">Overview of control room</div>
				</div>
				<div class="sw-divider"></div>
				<el-select v-model="stationId" placeholder="请选择" popper-class="pp">
					<el-option v-for="item in [{ value: 1, label: '新疆台站' },{ value: 2, label: '新疆台站2' }]" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<el-button type="sw-def">切换台站</el-button>
			</div>
			<div class="page-parmary-item page-title-name" v-if="showPage == 'stationAll'">
				<img class="page-dom-title-img" src="@/assets/images/station-all-on.png">
				<div style="margin-left: 1rem;">
					<div class="page-title-name-sw">电台总览</div>
					<div style="font-size: 0.45rem;">ALL radio station</div>
				</div>
			</div>
			<!-- 按钮 -->
			<div class="page-parmary-item page-title-right">
				<div class="full-bottom">
					<img class="page-time-img" src="@/assets/images/station-on.png" title="台站总览"
						v-if="showPage == 'station'">
					<img class="page-time-img" src="@/assets/images/station-off.png" title="台站总览" v-else
						@click="cutPage('station')">
				</div>
				<div class="full-bottom">
					<img class="page-time-img" src="@/assets/images/room-on.png" title="机房总览" v-if="showPage == 'room'">
					<img class="page-time-img" src="@/assets/images/room-off.png" title="机房总览" v-else
						@click="cutPage('room')">
				</div>
				<div class="full-bottom">
					<img class="page-time-img" src="@/assets/images/station-all-on.png" title="电台总览"
						v-if="showPage == 'stationAll'">
					<img class="page-time-img" src="@/assets/images/station-all-off.png" title="电台总览" v-else
						@click="cutPage('stationAll')">
				</div>
				<div class="full-bottom" :title="!isFull ? '全屏' : '退出全屏'" @click="fullPage">
					<i class="el-icon-full-screen" v-if="!isFull"></i>
					<img class="page-time-img" src="@/assets/images/outFull.png" v-else>
				</div>
			</div>
		</div>
		<station-page class="page-conten-show" v-if="showPage == 'station'"></station-page>
		<room-page class="page-conten-show" v-if="showPage == 'room'"></room-page>
		<station-all-page class="page-conten-show" v-if="showPage == 'stationAll'"></station-all-page>
	</div>
</template>

<script>
import stationPage from './station_page.vue';
import roomPage from './room_page.vue';
import stationAllPage from './station_all_page.vue'

let baseSize = 20
export default {
	components: { stationPage, roomPage, stationAllPage },
	data() {
		return {
			// 是否全屏
			isFull: false,
			// 展示页面 station:台站总览、 room: 机房总览、 stationAll: 电台总览
			showPage: 'room',
			// 台站id
			stationId: 1,
		};
	},
	watch: {
		showPage(val){
			if(val == 'stationAll'){
				baseSize = 10
			}else{
				baseSize = 20
			}
			this.initPageSize();
		}
	},
	computed: {
	},
	created() {
		this.initPageSize();
		// 适配分辨率
		window.addEventListener('resize', () => this.initPageSize())
	},
	methods: {
		// 打开全屏
		fullPage() {
			if (!document.fullscreenElement) {
				// 进入全屏
				document.documentElement.requestFullscreen();
				this.isFull = true;
			} else {
				// 退出全屏
				if (document.exitFullscreen) {
					this.isFull = false;
					document.exitFullscreen();
				}
			}
		},
		// 适配分辨率
		initPageSize() {
			const scale = document.documentElement.clientWidth / 1920;
			const fontSize = baseSize * Math.min(scale, 2) + 'px';
			document.documentElement.style.fontSize = fontSize;
		},
		// 切换页面
		cutPage(page) {
			this.showPage = page;
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', () => this.initPageSize())
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './css/hard.css';
@import './css/elasticity.css';
@import './css/index.css';

.page-conten-show {
	height: calc(100vh - 4rem);
	overflow: hidden;
}

.page-title-name {
	text-align: left;
	margin-top: 0.9rem;
	display: flex;
}

.sw-divider {
	width: 0.3rem;
	background-color: bisque;
	margin: 0.4rem 0.5rem 0.5rem 2rem;
}

.page-title-name-sw {
	font-size: 1.8rem;
	font-weight: 400;
	font-style: oblique;
}

.page-title-name {
	::v-deep.el-input__inner {
		width: 10rem;
		font-size: 0.9rem;
		height: 2.4rem;
		border-radius: 0.2rem;
		margin-top: 0.2rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	::v-deep.el-select__caret{
		font-size: 0.7rem;
		line-height: 2.5rem;
	}
	::v-deep.el-input--medium{
		font-size: 0.7rem;
	}
	::v-deep.el-input__suffix{
		right: 0.25rem;
	}
}
.pp{
	.el-select-dropdown__item{
		font-size: 0.9rem;
		height: auto;
		line-height: 1.3rem;
	}
}
.el-button--sw-def{
	background: rgba(0, 0, 0, 0);
    color: #FFFFFF;
    font-weight: 400;
    font-size: 0.9rem;
    width: 6rem;
    text-align: center;
    padding: 0;
    height: 2.4rem;
	margin-left: 0.7rem;
	margin-top: 0.2rem;
	border-radius: 0.2rem;
	border: 0.1rem solid;
}
</style>
